<template>
  <div class="transfer-order-container">
    <!-- 顶部过滤栏 -->
    <el-form :model="filterForm" class="filter-form">
      <el-form-item label="移库状态" prop="status">
        <el-select
          v-model="filterForm.status"
          placeholder="全部"
          style="width: 120px"
        >
          <el-option label="全部" value="" />
          <el-option label="未移库" value="1" />
          <el-option label="已移库" value="2" />
          <el-option label="作废" value="3" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="移库单号" prop="orderNo">
        <el-input
          v-model="filterForm.orderNo"
          placeholder="请输入移库单号"
          style="width: 200px"
        />
      </el-form-item>

      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" class="add-btn" @click="handleAdd">新增</el-button>
    </el-form>

    <!-- 移库单表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      @expand-change="handleExpand"
    >
      <el-table-column type="expand">
        <template #default="{ row }">
          <el-table :data="row.goodsItems" border>
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="spec" label="规格名称" />
            <el-table-column prop="quantity" label="数量"  />
            <el-table-column prop="amount" label="金额(元)" />
          </el-table>
        </template>
      </el-table-column>

      <el-table-column prop="orderNo" label="单号" width="160" />
      <el-table-column prop="fromWarehouse" label="源仓库" width="120" />
      <el-table-column prop="toWarehouse" label="目标仓库" width="140" />
      <el-table-column label="移库状态" width="100">
        <template #default="{ row }">
          <el-tag :type="statusTagType[row.status]">
            {{ statusMap[row.status] }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="总数量/总金额(元)" width="150">
        <template #default="{ row }">
          <div>数量：{{ row.totalQuantity }}</div>
          <div>金额：{{ row.totalAmount }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作时间" width="160">
        <template #default="{ row }">
          <div>创建：{{ row.createTime }}</div>
          <div v-if="row.updateTime">更新：{{ row.updateTime }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="operator" label="操作人" width="100" />
      <el-table-column prop="remark" label="备注" />

      <el-table-column label="操作" width="220" fixed="right">
        <template #default="{ row }">
          <el-button-group class="action-btns">
            <el-button type="primary" link @click="handleEdit(row)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
            <el-button type="primary" link @click="handlePrint(row)">打印</el-button>
            <el-button 
              v-if="row.status === 1" 
              type="primary" 
              link
              @click="handleTransfer(row)"
            >
              移库
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

interface TransferOrder {
  id: string
  orderNo: string
  fromWarehouse: string
  toWarehouse: string
  status: number // 1-未移库 2-已移库 3-作废
  totalQuantity: number
  totalAmount: number
  createTime: string
  updateTime?: string
  operator: string
  remark?: string
  goodsItems: GoodsItem[]
}

interface GoodsItem {
  goodsName: string
  spec: string
  quantity: number
  amount: number
}

// 状态映射
const statusMap: Record<number, string> = {
  1: '未移库',
  2: '已移库',
  3: '作废'
}

const statusTagType: Record<number, string> = {
  1: 'warning',
  2: 'success',
  3: 'danger'
}

// 过滤表单
const filterForm = reactive({
  status: '',
  orderNo: ''
})

// 表格数据
const tableData = ref<TransferOrder[]>([
  {
    id: '1',
    orderNo: 'YK03086684',
    fromWarehouse: '苏州园区',
    toWarehouse: '常熟准点',
    status: 2,
    totalQuantity: 1,
    totalAmount: 5999,
    createTime: '03-08 22:33',
    updateTime: '03-08 22:33',
    operator: 'ck',
    goodsItems: [
      { goodsName: '华为nova flip', spec: '黑', quantity: 1, amount: 5999 }
    ]
  },{
    id: '2',
    orderNo: 'YK03086685',
    fromWarehouse: '苏州园区',
    toWarehouse: '常熟准点',
    status: 1,
    totalQuantity: 1,
    totalAmount: 999,
    createTime: '03-08 22:33',
    updateTime: '03-08 22:33',
    operator: 'ck',
    goodsItems: [
      { goodsName: '华为nova flip', spec: '黑', quantity: 1, amount: 5999 }
    ]
  },{
    id: '3',
    orderNo: 'YK03086686',
    fromWarehouse: '苏州园区',
    toWarehouse: '常熟准点',
    status: 3,
    totalQuantity: 1,
    totalAmount: 1999,
    createTime: '03-08 22:33',
    updateTime: '03-08 22:33',
    operator: 'ck',
    goodsItems: [
      { goodsName: '华为nova flip', spec: '黑', quantity: 1, amount: 5999 }
    ]
  },{
    id: '1',
    orderNo: 'YK03086684',
    fromWarehouse: '苏州园区',
    toWarehouse: '常熟准点',
    status: 2,
    totalQuantity: 1,
    totalAmount: 5999,
    createTime: '03-08 22:33',
    updateTime: '03-08 22:33',
    operator: 'ck',
    goodsItems: [
      { goodsName: '华为nova flip', spec: '黑', quantity: 1, amount: 5999 }
    ]
  },
  // 更多模拟数据...
])

// 分页配置
const pagination = reactive({
  current: 5,
  size: 10,
  total: 50
})

const handleSearch = () => {
  // 实现搜索逻辑
}

const handleReset = () => {
  filterForm.status = ''
  filterForm.orderNo = ''
}

const handleAdd = () => {
  // 新增逻辑
}

const handleEdit = (row: TransferOrder) => {
  console.log('编辑', row)
}

const handleDelete = (row: TransferOrder) => {
  // 删除逻辑
}

const handlePrint = (row: TransferOrder) => {
  // 打印逻辑
}

const handleTransfer = (row: TransferOrder) => {
  // 执行移库操作
}

const handleExpand = (row: TransferOrder) => {
  // 展开行时加载商品明细（如果未加载）
}
</script>

<style scoped lang="scss">
.transfer-order-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

  .filter-form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    :deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 15px;
    }

    .add-btn {
      margin-left: auto;
    }
}

  .action-btns {
    .el-button {
      margin-right: 8px;
      padding: 0 5px;
    }
  }

  :deep(.el-table) {
    .el-table__row {
      td {
        padding: 12px 0;
      }
    }
    
    .el-tag {
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
    }
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>